<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#bet{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<select id="hey" onchange="checkNum">
			<option value="">买定离手</option>
			<option value="大">大大大</option>
			<option value="小">小小小</option>
		</select>
		<div id="box1">
			<img id="bet" src="img/walk.jpg" >
		</div>
		<button type="button" id="btn1" onclick="openBtn();">按钮1</button>
		<button type="button" onclick="closeBtn();">按钮2</button>
	</body>
	<script type="text/javascript">
		var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg'];
		window.onload = ()=>{
			$ = function(id){return (typeof(id)=='object')?id:document.getElementById(id);};
		}
		
		function checkNum(){
			
			
			// 	case 1:
			// 		break;
			// }
		}
		
		
		var iv = 0;
		var flag = true;
		var count; 
		function openBtn(){	
			if($("hey").value == ""){
					alert("请选中值再来");
					location.reload();
			}
			// if()
			// arr.Sort(function(a,b){
			// 	return 0.5 - Math.random();
			// });
			
			if(flag){
				iv = setInterval(function(){
					count = Math.floor(Math.random() * 6);
					$("bet").setAttribute('src',arr[count]);		
				},100);
				flag = false;
			}
		}
		
		function closeBtn(){
			if(iv){
				clearInterval(iv);
				flag = true;
				var newCount = count + 1;
				setTimeout(function() {
					if($("hey").value=='大'){	
						if(newCount > 3){
							alert("猜对了，当前点数："+ newCount +"点");
						}else{
							alert("猜错了，当前点数："+ newCount +"点");
						}
					}else{
						if(newCount < 4){
							alert("猜对了，当前点数："+ newCount +"点");
						}else{
							alert("猜错了，当前点数："+ newCount +"点");
						}
					}
				}, 500);
				
			}
		}
	</script>
</html>
